<!--  -->
<template>
  <a-modal
    width="1000px"
    v-model="visible"
    :keyboard="false"
    @ok="submit"
    @cancel="cancel"
    :title="RecordInfo.title"
  >
    <template slot="footer">
      <a-button key="back" @click="cancel">取 消</a-button>
      <a-button key="submit" type="primary" :loading="loading" v-if="RecordInfo.type == 'edit'"
                @click="submit">确 定</a-button>
<!--      <a-popconfirm-->
<!--        -->
<!--        placement="topRight"-->
<!--        ok-text="确 定"-->
<!--        cancel-text="取 消"-->
<!--     -->
<!--      >-->
<!--        <template slot="title">-->
<!--          <p>请确认是否要提交，提交后不可修改</p>-->
<!--        </template>-->

<!--      </a-popconfirm>-->
    </template>
    <a-spin :spinning="spinning">
      <custom-form
        ref="form"
        :is-validate="true"
        :editModel="''"
        :rules="rules"
        :form="form"
        :form-list="formOption"
      ></custom-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getOutputMonthDetail, getOutputMonth } from '@/api/project/productionRecords'
export default {
  name: 'Record',
  props: ['RecordInfo', 'value'],
  data() {
    return {
      visible: false,
      spinning: false,
      loading: false,
      form: {
        creater: JSON.parse(sessionStorage.getItem('ycloud-user_info')).name,
        createTime: this.getNowTime()
      },
      formOption: [
        {
          keyName: 'employeeSize',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '当月项目人数'
        },
        {
          keyName: 'planAmount',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '当月计划产值(万元)'
        },
        {
          keyName: 'actAmount',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '当月实际产值(万元)'
        },
        {
          keyName: 'actPerAmount',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '当月实际人均产值(万元)'
        },
        {
          keyName: 'confirmAmount',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '当月确认产值(万元)'
        },
        {
          keyName: 'confirmPerAmount',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '当月确认人均产值(万元)'
        },
        {
          keyName: 'actualCompletionRate',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '月度实际产值完成率'
        },
        {
          keyName: 'affirmCompletionRate',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '月度确认产值完成率'
        },
        {
          keyName: 'noteTaker',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '记录人'
        },
        {
          keyName: 'noteTime',
          type: 'BaseInput',
          span: 12,
          disabled: true,
          label: '记录时间'
        },
        {
          keyName: 'mainspring',
          type: 'BaseTextarea',
          placeholder: '请输入主要原因',
          span: 24,
          attrs: {
            class: 'requiredFormItem',
            maxLength: 3000
          },
          label: '主要原因'
        },
        {
          keyName: 'countermeasure',
          type: 'BaseTextarea',
          placeholder: '请输入解决措施',
          span: 24,
          attrs: {
            class: 'requiredFormItem',
             maxLength: 3000
          },
          label: '解决措施'
        },
        {
          label: '附件',
          keyName: 'fileList',
          type: 'uploadFile',
          attrs: {
            disabled: false,
            needChineseName: true
          },
          businessCode: 'PM38',
          span: 24
        }
      ],
      rules: {
        mainspring: [{ required: true, message: '请输入主要原因', trigger: 'change' }],
        countermeasure: [{ required: true, message: '请输入解决措施', trigger: 'change' }],
        fileList: [{ required: true, message: '请上传附件', trigger: 'change' }]
      }
    }
  },

  components: {},

  watch: {
    value(val) {
      this.visible = val
      if (val) {
        this.getOutputMonthDetail()
      } else {
        this.form = {}
        this.spinning = false
        this.loading = false
        this.visible = false
      }
    }
  },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    getOutputMonthDetail() {
      this.spinning = true
      getOutputMonthDetail({ id: this.RecordInfo.row.id })
        .then((res) => {
          const disabledKeyNames = ['mainspring', 'countermeasure', 'fileList']
          this.form = res.data
          // type: edit编辑 look查看
          if (this.RecordInfo.type == 'edit') {
            this.form.noteTaker = JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
            this.form.noteTime = this.getNowTime()
            this.formOption.map((v) => {
              if (disabledKeyNames.includes(v.keyName)) {
                v.disabled = false
              }
            })
          } else {
            // 查看dialog的话，让表单全部disabled
            this.formOption.map((v) => {
              if (disabledKeyNames.includes(v.keyName)) {
                v.disabled = true
              }
            })
          }
          this.spinning = false
        })
        .catch(() => {
          this.spinning = false
        })
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          const { fileList, countermeasure, mainspring } = this.form
          getOutputMonth({
            id: this.RecordInfo.row.id,
            fileList,
            countermeasure,
            mainspring
          })
            .then((res) => {
              this.loading = false
              this.$emit('refreshMonthList')
              this.cancel()
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.$message.warning("请填写完所有必填项信息")
        }
      })
    },
    cancel() {
      this.$refs.form.clearValidate()
      this.$emit('input', false)
    }
  }
}
</script>
<style lang='less' scoped>
@deep: ~'>>>';
@{deep}.ant-form-item .ant-form-item-label {
  width: 180px;
}
@{deep} .ant-form-item .ant-form-item-control-wrapper {
  width: calc(100% - 180px);
}
</style>
